<template>
  <div>

    <el-card style="width: 100%;height: 100%;">

      <el-tabs v-model="activeName" type="card"  @tab-click="handleClick" class="center" stretch>
        <el-tab-pane label="入库策略" name="first" class="pane">

          <WarehousingStrategy />
        </el-tab-pane>
        <el-tab-pane label="出库策略" name="second" >
          <OutboundStrategy />
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'

  import WarehousingStrategy from './component/WarehousingStrategy.vue'
  import OutboundStrategy from './component/OutboundStrategy.vue'
  const activeName = ref('first')

  const handleClick = (tab, event) => {
    console.log(tab, event)
  }
</script>
<style>
  /* .demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  } */
  .center{
    margin: 40px auto;
    width: 50%;
    border: 1px solid #ddd;
    box-shadow:
      0 2px 10px #ddd /* 上阴影 */,  
    0 -2px 10px #ddd /* 下阴影 */,  
    2px 0 10px #ddd /* 左阴影 */,  
    -2px 0 10px #ddd /* 右阴影 */;  
    
   
}
/* 谷歌调试工具里找到对应的高度，重写属性值 */
.el-tabs__item{
  font-weight: bold;
}
.el-tabs {
    --el-tabs-header-height: 100px;
}
</style>